{% extends "layout.html" %}

{% block css_m %}
    <style>
        td {
            text-align: center;
        }

        th {
            text-align: center;
        }
    </style>
{% endblock %}
{% block js_m %}

{% endblock %}

{% block content_body %}

    <div class="page-jumbotron center-block" style="width: 1200px">
        <h1>登录账号管理 <a class="btn btn-default" href="{% url 'accounts_add' %}">添加登录账号</a></h1>


        <table class="table table-striped table-hover" style="width: 1200px">
            <thead>
            <tr style="text-align: center">


                <th>序号</th>
                <th>用户名</th>
                <th>密码(密文)</th>
                <th>昵称</th>
                <th>权限</th>
                <th>操作</th>
            </tr>
            <thead>
            <tbody>
            {% for each in accounts_obj %}
                <tr style="text-align: center">
                    <td>{{ each.id }}</td>
                    <td>{{ each.user_name }}</td>
                    <td>{{ each.pwd }}</td>
                    <td>{{ each.nick_name }}</td>
                    <td>{{ each.get_auth_level_display }}</td>

                    <td><a href="/admin/accounts/{{ each.id }}/edit.html/">修改</a>|
                        <a href="#" id={{ each.id }} class="del_account">删除</a>
                    </td>
                </tr>
            {% endfor %}
</tbody>

        </table>


    </div>

{% endblock %}

{% block content_bottom %}
    {#模态对话框#}

    <div class="modal fade " id="add-modal_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" style="z-index: 10000">
        <div class="modal-dialog modal-lg" style="width: 1000px">
            <div class="alert alert-danger" role="alert">
            <div class="modal-content">
                <div class="modal-header">

                    <h2 class="modal-title" id="myModalLabel">
                        操作确认：
                    </h2>
                </div>

                <div class="modal-body">
                    <h4 style="text-align: center"><strong>是否确认删除！</strong></h4>
                    <input id="uid_to_del" class="hidden"/>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="m_conf" style="margin-left: 60px">确定
                    </button>
                    <button type="button" class="btn btn-default" id="m_close">取消
                    </button>

                </div>

            </div><!-- /.modal-content -->
                </div>
        </div><!-- /.modal -->
    </div>
    <script>
        $(function () {

            $(".del_account").on("click", function () {
                $('#add-modal_id').modal('show');
                var uid = $(this).attr("id")
                $("#uid_to_del").val(uid)
            });
            $("#m_close").click(function () {

                $('#add-modal_id').modal('hide');
            });
            $("#m_conf").click(function () {

                $('#add-modal_id').modal('hide');
                $.ajaxSetup({

                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

                });
                $.ajax({
                        url: '{% url "accounts_del" %}',
                        type: 'POST',
                        data: {"uid": $("#uid_to_del").val(),},

                        dataType: 'JSON',
                        success: function (arg) {
                            if (arg["ret"]) {
                                location.reload()
                            }


                        }

                    }
                );
            });

        })

    </script>
{% endblock %}